<template>
  <div class="cate">
    <h3>TabBar案例</h3>
    <List :arr="arr">
      <template #tag="{ val, i }">
        <input
          type="text"
          ref="redInput"
          @keyup.enter="shangShi(val.msg, i)"
          @blur="shiJ(i)"
          v-model="val.msg"
          v-if="val.flag == true"
        />
        <van-button @click="add(i)" v-else type="primary">+Tag</van-button>
        <br />
        <p v-for="(it, i) in val.tag" :key="i">
          <van-tag type="primary">
            {{ it.name }}
          </van-tag>
        </p>
      </template>

      <!-- 如果单个插槽 v-slot={结构出来的数据内容} -->
      <!-- 如果多个插槽 #name名={结构出来的数据内容} -->
      <template #delete="{i}">
        <van-button type="danger" @click="del(i)">删除</van-button>
      </template>
    </List>
  </div>
</template>

<script>
import List from "@/components/List.vue";
export default {
  name: "P7indexCate",
  components: {
    List,
  },
  data() {
    return {
      arr: [
        {
          name: "天美意夏季专柜同款金色布女鞋6YF18BT6",
          price: 199,
          tag: [{ name: "秋冬" }, { name: "出纳" }],
          flag: false,
          msg: "",
        },
        {
          name: "奥休斯(all shoes) 冬季保暖女士休闲雪地靴 舒适加绒防水短靴 防滑棉鞋子",
          price: 199,
          tag: [{ name: "秋冬" }, { name: "出纳" }],
          flag: false,
          msg: "",
        },
        {
          name: "初语秋冬新款毛衣女 套头宽松针织衫简约插肩袖上衣",
          price: 199,
          tag: [{ name: "秋冬" }, { name: "出纳" }],
          flag: false,
          msg: "",
        },
        {
          name: "佐露缘蕾丝衫女2020春秋装新款大码女装衬衫上衣雪纺衫韩版打底衫长袖",
          price: 199,
          tag: [{ name: "秋冬" }, { name: "出纳" }],
          flag: false,
          msg: "",
        },
        {
          name: "熙世界中长款长袖圆领毛衣女2022秋装新款假两件连衣裙女107SL170",
          price: 199,
          tag: [{ name: "秋冬" }, { name: "出纳" }],
          flag: false,
          msg: "",
        },
        {
          name: "烟花烫2021秋季装新品女装简约修身显瘦七分袖欧根纱连衣裙 花央",
          price: 199,
          tag: [{ name: "秋冬" }, { name: "出纳" }],
          flag: false,
          msg: "",
        },
        {
          name: "熙世界中长款长袖圆领毛衣女2022秋装新款假两件连衣裙女107SL170",
          price: 199,
          tag: [{ name: "秋冬" }, { name: "出纳" }],
          flag: false,
          msg: "",
        },
      ],
    };
  },

  mounted() {},

  methods: {
    del(i) {
      this.arr.splice(i, 1);
    },
    add(i) {
      this.arr[i].flag = true;
      this.$nextTick(() => {
        this.$refs.redInput.focus();
      });
    },
    //丧失焦点
    shangShi(v, i) {
      if (v !== v) {
        this.arr[i].flag = false;
      } else {
        let obj = {
          name: v,
        };
        this.arr[i].tag.push(obj);
        // console.log(v);
      }
    },
    shiJ(i) {
      this.arr[i].flag = false;
    },
  },
};
</script>

<style lang="scss">
.cate{
    font-size: 16px;
}
tr{
    td{
        text-align: center;
        width: 500px;
        height: 30px;
    }
}
</style>